<template>
	<view>
		<view v-if="!disabled || writable" class="color-block" @tap="colorChange">
			<view class="color-ctx" :style="{ backgroundColor: val }">
				<u-icon name="arrow-down" color="#FFFFFF" size="14"></u-icon>
			</view>
		</view>
		<view v-else class="color-block">
			<view class="color-ctx" :style="{ backgroundColor: '#f5f7fa' }">
				<u-icon name="close" color="#FFFFFF" size="14"></u-icon>
			</view>
		</view>
		<t-color-picker @confirm="colorConfirm" :color="hexToRgba(val)" ref="t-color-picker"></t-color-picker>
	</view>
</template>

<script>
import { hexToRgba } from '../utils/index.js'
import tColorPicker from '../t-color-picker/t-color-picker.vue'
export default {
	data() {
		return {
			val: '',
			validator: false
		};
	},
	components: { tColorPicker },
	props: {
		value: {
			type: String,
			default: '#1aa034'
		},
		disabled: {
			type: Boolean,
			default: false
		},
		writable: {
			type: Boolean,
			default: true
		}
	},
	watch: {
		value: {
			handler () {
				this.val = this.value || ''
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		hexToRgba,
		// 打开颜色选择器
		colorChange() {
			this.$refs['t-color-picker'].open()
		},
		// 确定
		colorConfirm(co) {
			this.val = co.hex
			this.$emit('input', this.val)
		}
	}
}
</script>

<style scoped>
.requiredMessage {
	width: 100%;
	height: 50rpx;
	line-height: 50rpx;
	color: #f56c6c;
	font-size: 22rpx;
}

.color-block {
	width: 60rpx;
	height: 60rpx;
	border: 1px solid #e6e6e6;
	border-radius: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.color-ctx {
	width: 70%;
	height: 70%;
	border: 1px solid #e6e6e6;
	border-radius: 8rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>